{% extends 'base.html' %}
{% block title %}首页{% endblock %}
<!-- header start -->
{% block header %}
  {% include 'include/_header.html' %}
{% endblock %}
{% load custom_filters %}
<!-- header end -->
<!-- main start -->
{% block content %}
  <main id="main">
    <div class="layui-container"> <!--实现页面内容居中，两边留白-->
      <!--菜单+轮播图 start-->
      <div class="main-content">
        <!--menu start--><!--示例-基础菜单7 + 导航-默认面包屑-->
        <ul class="layui-menu" id="menu">
          {% for menu_sub in menu_list %}
            <li class="layui-menu-item-parent" lay-options="{type: 'parent'}">
              <div class="layui-menu-body-title menu-title">

                  <span class="layui-breadcrumb">
                    {% for menu in menu_sub %}
                      <a href="/commodity/search/?q={{ menu.name }}">{{ menu.name }}</a>
                      <!--<a href="/demo/">{{ forloop.counter0|add:'1' }}</a>-->
                      <!--<a><cite></cite>{{ forloop.counter0|add:'2' }}</a>-->
                    {% endfor %}
                  </span>

                <i class="layui-icon layui-icon-right"></i>
              </div>
              <div class="layui-panel layui-menu-body-panel">
                <ul>
                  {% for menu in menu_sub %}
                    <li class="layui-menu-item-parent" lay-options="{type: 'parent'}">
                      <div class="layui-menu-body-title submenu">
                        <h3>{{ menu.name }}</h3>
                        <span class="layui-breadcrumb">
                        {% for sub_menu in menu|get_sub_menu %}
                          <a href="/commodity/search/?q={{ sub_menu.name }}">{{ sub_menu.name }}</a>
                        {% endfor %}
                          <!--<a href="/demo/">芭比裤</a>
                          <a>阔腿神裤</a>
                          <a>宝藏羊毛</a>
                          <a>毛衣外套</a>
                          <a>西装大衣</a>
                          <a>无钢圈文胸</a>
                          <a>美背文胸</a>-->
                            </span>
                      </div>
                    </li>
                  {% endfor %}
                  <!--<li>同上复制6个</li>-->
                </ul>
              </div>
            </li>
          {% endfor %}
          <!--<li>同上复制10个</li>-->
        </ul>
        <!--menu end-->
        <!--banner start--><!--示例-轮播-图片-->
        <div class="layui-carousel" id="banner">
          <div carousel-item="">
            <div><img src="https://img.alicdn.com/tfs/TB1FjZ7VWL7gK0jSZFBXXXZZpXa-520-280.png"></div>
            <div><img src="https://gtms01.alicdn.com/tps/i1/TB1r4h8JXXXXXXoXXXXvKyzTVXX-520-280.jpg"></div>
            <div><img src="https://gtms02.alicdn.com/tps/i2/TB10vPXKpXXXXacXXXXvKyzTVXX-520-280.jpg"></div>
            <div><img src="https://img.alicdn.com/tfs/TB1wOidVWL7gK0jSZFBXXXZZpXa-520-280.jpg"></div>
          </div>
        </div>
        <!--banner end-->
      </div>
      <!--菜单+轮播图 end-->
      {% for column in columns %}
        <!--好物推荐 start-->
        <div class="good-goods">
          <!--分割线 start--><!--示例-辅助元素-内容区域分割线-->
          <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
            <legend><span>{{ column.name }}</span><span class="layui-badge">{{ column.subtitle }}</span></legend>
            <!--示例-徽章-->
          </fieldset>
          <!--分割线 end-->
          <!--good-list start--><!--示例栅格+卡片面板-->
          <div class="layui-row good-list">
            {% for commodity in data|get_item:column.name %}
              <div class="layui-col-xs3">
                <a class="layui-card" href="/commodity/get_detail/?id={{ commodity.id }}">
                  <div class="layui-card-header">
                    <div class="img">
                      <img src="{{ commodity.cover_picture }}"
                           alt="">
                    </div>
                  </div>
                  <div class="layui-card-body">
                    <h4>{{ commodity.title }}</h4>
                    <p>{{ commodity.subtitle }}</p>
                  </div>
                </a>

              </div>
            {% endfor %}
            <!--<div class="layui-col-xs3">同上复制7个</div>-->
          </div>
          <!--good-list end-->
        </div>
        <!--好物推荐 end-->
      {% endfor %}
    </div>
  </main>
{% endblock %}
<!-- main end -->
<!-- footer start -->
{% block footer %}
  {% include 'include/_footer.html' %}
{% endblock %}
<!-- footer end -->
{% block js %}
  <script src="/static/js/index.js"></script>{% endblock %}